{{extend '../layout/main.html'}}

{{block name="css"}}
<style>
  .card-header {
    display: flex;
    justify-content: space-between;
  }

  .card-header:after {
    display: none;
  }
</style>
{{/block}}

{{block name='js'}}
<script>
  let lens = []; //$('[name="nid"] checked').length
  // 复选或单选，用change，click事件有点的过早 -- dom
  document.querySelector('#changeSelectAllFn').addEventListener('change', function (e) {
    document.querySelectorAll('[name="nid"]').forEach(node => {
      node.checked = this.checked
      lens.push('')
    })
  })

  $('[name="nid"]').change(function () {
    if ($(this)[0].checked) {
      lens.push('')
    } else {
      lens.pop()
      if (lens.length == 0) $('#changeSelectAllFn').prop('checked', false)
    }
  })

  function del(id, dom) {
    $.confirm({
      title: '删除提示',
      content: '您真的要删除此记录项吗？',
      buttons: {
        confirm: {
          text: '确认删除',
          action: function () {
            // 删除操作
            $.ajax({
              url: `/news/${id}/del`,
              type: 'delete'
            }).then(ret => {
              $(dom).parents('tr').remove()
              // $.alert('删除成功')
            })
          }
        },
        cancel: {
          text: '取消',
          action: function () { }
        },
      }
    });

  }

</script>
{{/block}}

{{block name="content"}}
<!--页面主要内容-->
<main class="lyear-layout-content">

  <div class="container-fluid">

    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-header">
            <h4>资讯列表数据展示</h4>
            <a href="/news/add" class="btn btn-primary add">添加资讯</a>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>
                      <input type="checkbox" id="changeSelectAllFn">
                    </th>
                    <th>序号</th>
                    <th>标题</th>
                    <th>封图</th>
                    <th>作者</th>
                    <th>发布时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {{if news.length==0}}
                  <tr>
                    <td colspan="8">暂无数据</td>
                  </tr>
                  {{/if}}
                  {{each news}}
                  <tr>
                    <td>
                      <input type="checkbox" name="nid" value="{{$value._id}}">
                    </td>
                    <td style="text-align: center;">{{$index+1}}</td>
                    <td>{{$value.title}}</td>
                    <td>
                      <img src="{{$value.pic}}" alt="" style="width: 50px;">
                    </td>
                    <td>{{$value.author}}</td>
                    <td>{{$value.at}}</td>
                    <td>
                      <a href="/news/{{$value.id}}/edit" class="btn-sm btn-info">修改</a>
                      <a onclick="del('{{$value.id}}',this)" class="btn-sm btn-danger">删除</a>
                    </td>
                  </tr>
                  {{/each}}
                </tbody>
              </table>
            </div>
            <nav>
              <ul class="pager">
                <li><a href="?page={{page-1}}">上一页</a></li>
                <li><a href="?page={{page+1}}">下一页</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>

  </div>

</main>
<!--End 页面主要内容-->
{{/block}}